<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2-删除留言</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 500px;
            height: 100px;
            border: 1px solid green;
			border-radius:3px;
            outline: none;
            resize: none;
			vertical-align: bottom;
        }
        button{
			width:90px;
			height:35px;
			background-image: linear-gradient(to bottom, #adb1b5, #bdc0c4);
			border-radius: 3px;
			border:none;
			color:#fff;
			margin-left:10px;
			cursor:pointer;
		}
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 500px;
            padding: 5px;
            color: red;
            font-size: 14px;
            margin: 15px 0;
			border-bottom:1px dashed #ADB1B5;
			list-style:none;
			overflow: hidden;
        }
		li span:nth-child(1){
			float: left;
			font-size:15px;
			color: blue;
		}
		li span:nth-child(2){
			float: right;
			font-size:15px;
			cursor: pointer;
		}		
    </style>
</head>

<body>
    <textarea name="" id=""></textarea><button>发布</button>
    <ul></ul>
	<script type="text/javascript">
		var btn = document.querySelector('button');
		var txt = document.querySelector('textarea');
		var ulNode = document.querySelector('ul');
		btn.onclick=function(){
			//文本域的值
			var text_val = txt.value;
			//判断是否输入了内容
			var obj = validateMesssage(text_val);
			if(!obj.status){
				alert(obj.msg);
				//结束程序
				return;
			}else{
				//创建节点
				var liNode = document.createElement('li');
				//向li节点添加标签
				liNode.innerHTML = '<span>'+text_val+'</span><span class="del">删除</span>';
				
				//向父节点添加元素对象
				ulNode.insertBefore(liNode,ulNode.children[0]);
				
				//删除节点 node.removeChild()
				var spans = document.querySelectorAll('.del');
				console.log(spans);
				for(var i=0;i<spans.length;i++){
					spans[i].onclick = function(){
						ulNode.removeChild(this.parentNode);
					}
				}
			}
			//alert(obj.status+'='+obj.msg);
		}

		/**
		 * 自定义校验方法
		 * @param {文本内容} txtval
		 * @return {对象}{status:1,msg:'ok'}
		 */
		function validateMesssage(txtval){
			var obj = {
				status:0,
				msg:'error'
			}
			//判断是否为空
			if(txtval==''||txtval==null||txtval==undefined||txtval.length==0){
				obj.status = 0;
				obj.msg = '输入内容不能为空!';
				return obj;
			}
			//判断输入的内容在6-10之间
			if(txtval.length<6||txtval.length>10){
				obj.status = 0;
				obj.msg = '内容在6-10之间!';
				return obj;
			}
			//都通过
			obj.status = 1;
			obj.msg = '校验成功!';
			return obj;
		}
		
	</script>
</body>

</html>
